<template>
	<view>
		<view v-if="browserType">
			<view>
				{{`APP类型:${browserType.app_type}`}}
			</view>
			
			<view>
				{{`浏览器类型:${browserType.browser_platform}`}}
			</view>
			
			<view>
				{{`浏览器名称:${browserType.browser_name}`}}
			</view>
		</view>
		
		<view style="
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50px;
			box-shadow: 0 0 14px 0 #44444444;
		"
			@click="onShare"
		>
			<!-- <button type="primary" open-type="share">分享给好友</button> -->
			分享到微信打开
		</view>
		
		<view style="
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50px;
			box-shadow: 0 0 14px 0 #44444444;
		"
		@click="shareChartMessage"
		>
			分享卡片消息
			<!-- <wx-open-launch-weapp id="launch-btn" username="gh_783bxxxx" path="/pages/login/index"> -->
		</view>
		
		<view style="
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50px;
			box-shadow: 0 0 14px 0 #44444444;
		"
		@click="jumpToWxminiSchema"
		>
			H5浏览器跳转到微信小程小程序(schema)
			<!-- <wx-open-launch-weapp id="launch-btn" username="gh_783bxxxx" path="/pages/login/index"> -->
		</view>
		
		<view style="
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50px;
			box-shadow: 0 0 14px 0 #44444444;
		"
		@click="jumpToWxminiShortUrl"
		>
			H5浏览器跳转到微信小程小程序(short url)
			<!-- <wx-open-launch-weapp id="launch-btn" username="gh_783bxxxx" path="/pages/login/index"> -->
		</view>
		
	</view>
	
	<u-popup
		:show="showQrcode" 
		mode="center" 
		:custom-style="{backgroundColor:'transparent'}"
		close-on-click-overlay
		@close="showQrcode=false"
		@click="showQrcode
	"> 
		<view style="border-radius: 10px;background-color: white;padding: 10px;" >
			<qrcode v-if="!tempFilePath" v-model="tempFilePath" :canvasId="'qrcode2'" :data="qrcodeData"></qrcode>
			<image v-if="tempFilePath" mode="aspectFit" show-menu-by-longpress :src="tempFilePath" style="width: 200px;height: 200px"></image>
		</view>
		
		<view  v-if="$browser.isWXBrowse()" style="
			background-color: #67c200;
			color: white;
			border-radius: 10px;
			padding: 10px;
			font-size: 16px;
			margin: 20px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 14px;
		"
		@click="onSaveQrcode"
		>
			<view>长按识别二维码打开</view>
			<view>然后右上角分享给朋友或朋友圈</view>
		</view>
		
		<view v-if="!$browser.isWXBrowse()" style="
			background-color: #67c200;
			color: white;
			border-radius: 10px;
			padding: 10px;
			font-size: 16px;
			margin: 20px 0;
			display: flex;
			justify-content: center;
			align-items: center;
		"
		@click="onSaveQrcode"
		>
			保存相册,在微信中长按识别
		</view>
		
<!-- 		<view style="
			background-color: #67c200;
			color: white;
			border-radius: 10px;
			padding: 10px;
			font-size: 16px;
			margin: 20px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 14px;
		"
		@click="onSaveQrcode"
		>
			<view>在微信浏览器中打开此页</view>
			<view>再长按识别</view>
		</view> -->
		
		<view v-if="!$browser.isWXBrowse()" style="
			background-color: #67c200;
			color: white;
			border-radius: 10px;
			padding: 10px;
			font-size: 16px;
			margin: 20px 0;
			display: flex;
			justify-content: center;
			align-items: center;
		"
		@click="onSaveQrcode"
		>
			发送到微信打开,再分享链接
		</view>
		
		<view v-if="!$browser.isWXBrowse()" style="
			background-color: #67c200;
			color: white;
			border-radius: 10px;
			padding: 10px;
			font-size: 16px;
			margin: 20px 0;
			display: flex;
			justify-content: center;
			align-items: center;
		"
		@click="onSaveQrcode"
		>
			用微信扫码
		</view>
	</u-popup>
	
	
	<u-popup
		:show="showShareGuid" 
		mode="center" 
		:custom-style="{backgroundColor:'transparent'}"
		:overlayStyle="{backgroundColor:'#000000c5'}"
		close-on-click-overlay
		@close="showShareGuid=false"
		@click="showShareGuid = false
	"> 
		<view @click="showShareGuid=false" style="position:fixed;top: 0;left: 0;right: 0;">
			<shareGuid></shareGuid>
		</view>
	</u-popup>
	
</template>

<script>
	import qrcode from './qrcode.vue'
	// import NativeShare from 'nativeshare'
	import shareGuid from './wx_chart_share_guide.vue'
	
	export default {
		components:{
			qrcode,
			shareGuid
		},
		async onLoad(){
			let res = await this.$http.get(`/common/wx/jsdk_config?url=${location.href}`)
			 
			let config = res.data
			
			console.log(config)
			
			// 先创建一个实例
			//var nativeShare = new NativeShare()
			// 如果你需要在微信浏览器中分享，那么你需要设置额外的微信配置
			// 特别提示一下微信分享有一个坑，不要分享安全域名以外的链接(具体见jssdk文档)，否则会导致你配置的文案无效
			// 创建实例应该带参数
			
			// nativeShare 只支持 H5,小程序注释掉  2023-11-24 @jason
			
			// this.nativeShare = new NativeShare({
			//     wechatConfig: {
			//         // appId: '',
			//         // timestamp: '',
			//         // nonceStr: '',
			//         // signature: '',
			// 		...config
			//     },
			//   	// 让你修改的分享的文案同步到标签里，比如title文案会同步到<title>标签中
			// 	// 这样可以让一些不支持分享的浏览器也能修改部分文案，默认都不会同步
			//   	syncDescToTag: false,
			//   	syncIconToTag: false,
			//   	syncTitleToTag: false,
			// })
			
			// 1，此网站是在公众号菜单中的链接打开的，才能正常分享；
			// 2，此网站是通过收藏链接进来的,再打开分享；(先收藏)
			// 3，把链接换成二维码，扫码后进入分享就OK。所有的前提是你配置必须OK!
			// 4. 此网站是点击消息卡片打开进来的 
			
			this.$wxsdk.config(config)
			
			this.$wxsdk.ready(()=>{
				let shareData = {
					title: '奥铃Pro', // 分享标题
					desc: '全新一代三冠王轻卡', // 分享描述
					link: `${location.href}`,
					imgUrl: 'http://www.apesk.net/static/post-head-2.jpg', // 分享图标
					success: function () {
						// 设置成功
						alert('设置成功');
					}
				}
				
				// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
				// 设置分享朋友内容
				this.$wxsdk.updateAppMessageShareData(shareData)
				
				// 设置分享朋友权内容
				this.$wxsdk.updateTimelineShareData(shareData)
				
				alert('验证成功.')
			})
			
			// console.log(this.nativeShare)
			
			this.$wxsdk.error(()=>{
				alert('验证失败.')
			})
			
			this.browserType = this.$browser.getAppType()
			console.log(this.browserType)
		},
		data() {
			return {
				browserType: null,
				showQrcode:false,
				tempFilePath:null,
				qrcodeData:'',
				//nativeShare:null,
				showShareGuid:null
			}
		},
		methods: {
			onShare() {
				// const share = {
				//   title: '分享标题',
				//   text: '分享内容',
				//   url: '分享链接',
				// };
				
				// navigator.share(share);
				
				// 设置分享文案
				// nativeShare 只支持 H5,小程序注释掉  2023-11-24 @jason
				
				// this.nativeShare.setShareData({
				//     icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
				//     link: 'http://www.apesk.net',
				//     title: 'NativeShare',
				//     desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
				//     from: '@fa-ge',
				// })
				
				// 唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。类似setShareData)
				
				// nativeShare 只支持 H5,小程序注释掉  2023-11-24 @jason
				// try {
				// 	//nativeShare.call()
				//     // 如果是分享到微信则需要 nativeShare.call('wechatFriend')
				// 	this.nativeShare.call()
				//     // 类似的命令下面有介绍
				// } catch(err) {
				// 	this.showShareGuid = true
				//   // 如果不支持，你可以在这里做降级处理
				//   //alert(err)
				// }
			},
			onShowShareGuid(){
				this.showShareGuid = true
			},
			async onSaveQrcode(){
				await this.saveTempImageToPhotosAlbum(this.tempFilePath)
				
				uni.showToast({
					title:'保存成功'
				})
				
				this.showQrcode = false
			},
			shareChartMessage(){
				this.showShare = false
				
				//this.qrcodeData = `${this.$settings.post_preview_url_root_h5}${this.$settings.post_preview_uri_h5}?id=${1}`
				
				// this.qrcodeData = 'weixin://dl/business/?t=Nup78n31b0a'
				this.qrcodeData = `${this.$settings.post_preview_url_root_h5}${location.hash}`
				
				this.showQrcode = true
				
				console.log(`${this.$settings.post_preview_url_root_h5}${location.hash}`)
			},
			jumpToWxminiSchema() {
				location.href = 'weixin://dl/business/?t=Nup78n31b0a'
			},
			jumpToWxminiShortUrl() {
				location.href = 'https://wxaurl.cn/eegTknDQe5n'
			}
			
		}
	}
</script>

<style>
	
</style>
